<template>
	<view>
		<radio-group class="head-bar" @change="select">
			<label :class="current == 0 ? 'active' : ''">
				<radio value="0" />
				<view>待付款</view>
			</label>
			<label :class="current == 1 ? 'active' : ''">
				<radio value="1" />
				<view>已付款</view>
			</label>
			<label :class="current == 2 ? 'active' : ''">
				<radio value="2" />
				<view>已发货</view>
			</label>
			<label :class="current == 3 ? 'active' : ''">
				<radio value="3" />
				<view>已收货</view>
			</label>
			<label :class="current == 9 ? 'active' : ''">
				<radio value="9" />
				<view>申请退款</view>
			</label>
		</radio-group>

		<view class="card-list" v-if="current!=9">
			<view class="card" v-for="item in newOlderList" :key="item.order.id">
				<!-- 上半部分订单编号 -->
				<view class="order-title">
					<text>订单编号:{{item.order.orderSn}}</text>
					<text v-if="current==0" class="status">未付款</text>
					<text v-if="current==1" class="status">等待发货</text>
					<text v-if="current==2" class="status">已发货</text>
					<text v-if="current==3" class="status">已收货</text>
				</view>
				<!-- 商品信息 -->
				<view class="product" v-for="ele in item.items" :key="item.id">
					<image :src="ele.productPic" mode=""></image>
					<view class="info">
						<view class="text-one">
							<text class="title">{{ele.productName}}</text>
							<text class="price">¥{{ele.totalPrice}}</text>
						</view>
						<view class="text-two">
							<text>编号:{{ele.id}}</text>
							<text>x{{ele.productQuantity}}</text>
						</view>
						<view class="text-three">
							<view>规格:</view>
							<text class="" v-for="el in ele.productAttr" :key="el.value" style="margin-right: 10rpx;">
								{{el.key}}:{{el.value}}
							</text>
						</view>
						<view class="text-four" v-if="item.order.status == 2">
							<text v-if="ele.isReturn == 0" @tap="goOrderBack(ele)">退货</text>
							<text v-if="ele.isReturn == 1" style="color: red;">退货中</text>
						</view>
					</view>
				</view>
				<!-- 下半部分时间，合计 -->
				<view class="total-price">
					<text>时间：{{item.order.createTime}}</text>
					<text>合计：¥{{item.order.totalAmount}}</text>
				</view>
				<!-- 取消订单和付款按钮，只有在current为0，也就是待付款状态才会显示 -->
				<view class="btns" v-if="current == 0">
					<view class="btn btn-cancel-order" @tap="cancel(item.order.id)">取消订单</view>
					<view class="btn btn-pay" @tap="goOrder(item.order.id)">付款</view>
				</view>
				<view class="btns" v-if="current == 2">
					<view class="btn btn-pay" @tap="receiveGoods(item.order.id)">确认收货</view>
				</view>
			</view>
		</view>

		<view class="card-list" v-else>
			<view class="card" v-for="item in returnList" :key="item.id">
				<!-- 上半部分订单编号 -->
				<view class="order-title">
					<text>订单编号:{{item.orderSn}}</text>
					<text v-if="item.status==0" class="status">等待处理</text>
					<text v-if="item.status==1" class="status" style="color: red;">已退款</text>
				</view>
				<!-- 商品信息 -->
				<view class="product">
					<image :src="item.productPic" mode=""></image>
					<view class="info">
						<view class="text-one">
							<text class="title">{{item.productName}}</text>
							<text class="price">¥{{item.productRealPrice}}</text>
						</view>
						<view class="text-two">
							<text>编号:{{item.id}}</text>
							<text>x{{item.productCount}}</text>
						</view>
						<view class="text-three">
							<view>规格:</view>
							<text class="" v-for="el in item.productAttr" :key="el.value" style="margin-right: 10rpx;">
								{{el.key}}:{{el.value}}
							</text>
						</view>

					</view>
				</view>
				<!-- 下半部分时间，合计 -->
				<view class="total-price">
					<text>时间：{{item.createTime}}</text>
					<text>合计：¥{{item.returnAmount}}</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		findAllOrders,
		cancelOrder,
		receiveDone,
		orderReturnApplys
	} from "../../../api/my/orderlist/orderlist.js"
	export default {
		data() {
			return {
				current: 0, //当前筛选的订单状态
				orderList: [],
				returnList: [],
			};
		},
		methods: {
			// tab栏切换事件
			select(e) {
				this.current = e.detail.value;
			},
			// 初始化获取商品订单列表
			init() {
				// 前四个状态,获取前四个列表
				findAllOrders().then(res => {
					console.log(res);
					res.data.orderList.forEach(ele => {
						ele.items.forEach(el => {
							el.productAttr = JSON.parse(el.productAttr);
						})
					})
					this.orderList = res.data.orderList;
				});
				// 获取最后一个退款列表
				orderReturnApplys()
					.then(res => {

						console.log(res)
						res.data.items.forEach(el => {
							el.productAttr = JSON.parse(el.productAttr);
						})
						this.returnList = res.data.items;
					})
			},
			// 待付款状态current==0取消订单事件
			cancel(id) {
				cancelOrder(id).then(res => {
					console.log(res);

					uni.showToast({
						title: '取消订单成功',
						icon: 'success',
						duration: 1000,
						success: () => {
							this.init();
						}
					});

				})
			},
			// 待付款状态current==0付款事件，去往order界面
			goOrder(id) {
				uni.navigateTo({
					// url:`../order/order?orderId=${id}`;
					url: `../../home/order/order?orderId=${id}`
				})
			},
			// 确认收货current==2
			receiveGoods(id) {

				receiveDone({
					orderId: id
				}).then(res => {
					// console.log(res);
					if (res.success == true) {

						uni.showToast({
							title: '确认收货成功！',
							icon: 'success',
							duration: 1000,
							success: () => {
								this.init();
							}
						});

					}
				})

			},
			// 跳转到退款页面
			goOrderBack(item) {
				uni.navigateTo({
					url: `../orderback/orderback?orderId=${item.orderId}&orderItemId=${item.id}`
				})
			}
		},
		computed: {
			newOlderList() {
				return this.orderList.filter(ele => ele.order.status == this.current);
			}
		},
		onLoad(options) {
			this.current = options.type;
		},
		onShow() {
			this.init()
		}
	}
</script>

<style lang="scss" scoped>
	.active {
		border-bottom: 2px solid #dd524d;
		color: #dd524d;
	}

	.head-bar {
		overflow-y: auto;
		position: fixed;
		left: 0;
		top: 0;
		top: 80rpx;
		display: flex;
		justify-content: space-around;
		width: 100%;
		height: 62rpx;
		padding-top: 14rpx;
		background-color: #354e44;
		color: #fff;
		font-size: 30rpx;
		line-height: 62rpx;
		z-index: 999;

		radio {
			display: none;
		}
	}

	// 订单内容部分
	.card-list {
		margin-top: 130rpx;

		.card {
			width: 672rpx;
			box-sizing: border-box;
			padding: 36rpx;
			border-radius: 24rpx;
			background-color: #fff;
			margin: 30rpx auto;
			font-size: 24rpx;
			color: #3e3e3e;

			// 上半部分订单编号
			.order-title {
				line-height: 32rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: 2rpx solid #f1ece7;
				padding-bottom: 30rpx;

				.status {
					color: #034c46;
				}
			}

			// 中间部分商品信息
			.product {
				display: flex;
				justify-content: flex-start;
				border-bottom: 2rpx solid #f1ece7;
				padding: 30rpx 0;

				// 左边图片
				image {
					width: 162rpx;
					height: 162rpx;
					flex-shrink: 0;
					background-color: #8f8f94;
				}

				// 右侧信息
				.info {
					width: 470rpx;
					margin-left: 28rpx;

					.text-one {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 26rpx;
						line-height: 74rpx;

						.title {
							color: #3e3e3e;
						}
					}

					.text-two {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 22rpx;
						color: #8d8d8d;
						line-height: 30rpx;
						margin-top: 4rpx;
					}

					.text-three {
						font-size: 22rpx;
						color: #8d8d8d;
						line-height: 30rpx;
						margin-top: 4rpx;
					}

					.text-four {
						text-align: right;
						margin-top: 10rpx;
						color: #8d8d8d;
						text-decoration: underline;
					}
				}
			}
		}

		.total-price {
			font-size: 26rpx;
			line-height: 36rpx;
			text-align: right;
			margin-top: 14rpx;
			display: flex;
			justify-content: space-between;
		}

		// <!-- 取消订单和付款按钮，只有在current为0，也就是待付款状态才会显示 -->
		.btns {
			margin-top: 20rpx;
			display: flex;
			justify-content: flex-end;

			.btn {
				width: 124rpx;
				height: 50rpx;
				border: 2rpx solid #2d4f43;
				font-size: 26rpx;
				border-radius: 10rpx;
				color: #2d4f43;
				text-align: center;
				line-height: 50rpx;
				margin-left: 32rpx;
			}
		}
	}
</style>
